<h:panelGroup xmlns:h='http://java.sun.com/jsf/html'
              xmlns:p='http://primefaces.org/ui'
              xmlns:z='http://savanti.com.bo/ui'
              xmlns:s='http://savanti.com.bo/ui-simple'
              xmlns:x='http://java.sun.com/jsf/composite/ui/component'
              xmlns:e='http://java.sun.com/jsf/composite/ui/component-entity' styleClass='ITCuentaPagar' id='ITCuentaPagar'><p:growl id='growl'/>

<z:beanMenubar bean='#{ITCuentaPagar}' title='Cuenta #{ITCuentaPagar.entity.id}'/>

<h:panelGrid columns='1' width='100%' rendered='#{ITCuentaPagar.form}'>

  <h:panelGrid id='bean' columns='2' styleClass='bean align-top'>

  <x:beanPanel id='hd' bean='#{ITCuentaPagar}' title='Cuenta por pagar' cellpadding='7'>

  <x:fieldS b='#{bean}' t='Persona' v='#{bean.entity.persona}' x='#{x}' xL='#{x.nombre}' w='120px'/>

  <e:fieldI b='#{bean}' p='Referencia'  w='70px' t='Doc Ref'/>

  <e:fieldD b='#{bean}' p='Creacion'    w='120px'/>

  <e:fieldI b='#{bean}' p='Importe'     w='70px'/>

  <e:fieldD b='#{bean}' p='Vencimiento' w='120px'/>

  <e:fieldT b='#{bean}' p='Saldo'       w='120px'/>

  <e:fieldA b='#{bean}' p='Descripcion' w='120px'/>

  </x:beanPanel>


  <x:beanPanel id='ps' bean='#{ITCuentaPagar}' title='Pago' cellpadding='7' style='min-width: 300px'>

  <x:fieldL b='#{bean}' w='75px'  t='Tipo' v='#{bean.detail.tipo.id}'/>

  <x:fieldD b='#{bean}' w='120px' t='Fecha' v='#{bean.detail.fecha}' x='t'/>

  <x:fieldI b='#{bean}' w='75px'  t='Doc Ref' v='#{bean.detail.referencia}'/>

  <x:fieldI b='#{bean}' w='120px' t='Detalle' v='#{bean.detail.descripcion}'/>

  <x:fieldA b='#{bean}' w='55px'  t='Monto' v='#{bean.detail.importe}' l='detailAdd'/>

  </x:beanPanel>

  </h:panelGrid>


  <x:dataTable bean='#{ITCuentaPagar}' ls='#{ITCuentaPagar.entity.lsDocumentoDetalle}' r='#{x.documento}'>

  <s:columnT t='Tipo'    w='80px'  v='#{x.tipo.nombre}'/>

  <s:columnT t='Doc Ref' w='250px' v='#{x.referencia}'/>

  <s:columnT t='Detalle' v='#{x.descripcion}'/>

  <s:columnN t='Importe' w='75px' v='#{x.importe}'/>

  <s:columnD t='Fecha'   w='90px' v='#{x.fecha}' pattern='dd.MM.yyyy HH:mm'/>

  </x:dataTable>

</h:panelGrid>


<e:dataTable bean='#{ITCuentaPagar}'>

<z:columnT t='Cuenta'      v='#{x.id}' w='60px'/>

<z:columnT t='Persona'     v='#{x.persona.nombre}'/>

<z:columnT t='Descripcion' v='#{x.descripcion}'/>

<z:columnN t='Saldo'       v='#{x.saldo}' w='75px'/>

<z:columnN t='Importe'     v='#{x.importe}' w='75px'/>

<z:columnT t='Doc Ref'     v='#{x.referencia}' w='75px'/>

<z:columnD t='Creacion'    v='#{x.creacion}' w='75px'/>

<z:columnD t='Vencimiento' v='#{x.vencimiento}' w='75px'/>

</e:dataTable>

</h:panelGroup>